<template>
	<view class="content">

		<cu-custom bgColor="" :isBack="true" :isTitle="false">
			<block slot="backText" class="titilestyle">{{title}}</block>

		</cu-custom>
		<!-- 评论区域开始 -->
		<scroll-view scroll-y="true" :style="{height: swiperHeight+'px'}">
		
		<view class="commentBox" :style="{height: swiperHeight+'px'}">
			<view class="comment-item-box middle" :style="[{animationDelay:index*0.1+'s'}]"
				:class="index>0?'margintop1':''">
				<view class="cu-item comment-head vcenter ">
					<view class="cu-avatar round lg" @click="closeComent()"
						:style="[{backgroundImage:'url('+item.headimgurl+')'}]">
					</view>
					<view class="comment-head-title" @click="closeComent()">
						<view class="user-name text-xxl">{{item.nickname || ""}}</view>
						<view class="text-gray text-sm flex comment-data ">
							{{item.created_at || ''}}
						</view>
					</view>
					<view class="cu-btn shenhe text-red" v-if=" item.status==0">
						待审核...
					</view>
					<view class="cu-btn yiguanzhu" @click="follow(item.user_id)"
						v-if="item.follow==1 && item.status==1">已关注
					</view>
					<button class="cu-btn round  lines-blue guanzhu" @click="follow(item.user_id)"
						v-if="item.follow==0 && item.status==1">关注</button>

				</view>
				<view class="coment-content ">
					<TextOver :content="item.content" :num="80" :isFixed="false" style="height: 100%;" :type="1">
					</TextOver>
				</view>

				<view class="imgbox ">

					<image mode="aspectFill" :class="item.pics.length>1?'picBox':'picBoxNo'" v-if="img"
						v-for="(img,key) in item.pics" :key="key" :src="img" @click="previewImg(img,item.pics)"
						@error="errorPics(key)">
					</image>
					<image :class="(item.pics.length>1)?'picBox':'picBoxNo'" class="picBox" mode="aspectFit"
						v-for="(img,key) in item.pics" :key="key" :src="resDomain+'/static/img/error.png'" v-if="!img">
					</image>

				</view>

				<view class="comment-foot">
					<view class='cu-tag round comment-foot-tag'>{{item.area.area_name}}</view>
					<view class="comment-foot-right text-gray text-sm text-right">
						<view class="comment-foot-view" @click="praise(item.forum_id)">


							<text class="comment-foot-num ">{{count(item.praise_num) || 0}} </text>
							<view class="cuIcon-appreciatefill text-red comment-foot-icon clickEffict"
								style="color: red;" v-if="item.praise==1">
							</view>


							<view class="cuIcon-appreciate  comment-foot-icon clickEffict" v-else></view>



						</view>

						<view class="comment-foot-view" @click="closeComent()">

							<text class="comment-foot-num">{{count(item.reply_num) || 0}}</text>
							<text class="cuIcon-mark comment-foot-icon clickEffict" style="margin-left: 10%;"></text>

						</view>


					</view>
				</view>


			</view>
		</view>

		</scroll-view>

		<!-- 评论区域结束 -->


		<!--点击单个评论中全部评论开始 -->
		<view class="comment-secen-box" :animation="animationData" :style="{height:deviceH+'px',bottom:-deviceH+'px'}">

			<view class="mask" @click="closeComent" v-if="isShowComment">

			</view>

			<view class="comment-secend animation-slide-bottom" :style="{height:deviceH*0.9+'px'}">
				<view class="comment-secend-title">
					全部评论
					<text class="text-sm" v-show="foruminfo.replyList">({{foruminfo.replyList.length}})</text>

					<view class="comment-secend-fn" @click="closeComent">
						<text class="cuIcon-close comment-foot-icon clickEffict margin-left"></text>
					</view>
				</view>
				<view class="comment-secend-boxes" :style="{height:deviceH*0.9+'px'}">

					<view class="comment-item-box1   animation-slide-bottom "
						v-for="(reply,index) in foruminfo.replyList" :key="index">
						<view class="cu-item comment-head vcenter ">
							<view class="cu-avatar round lg" :style="[{backgroundImage:'url('+reply.headimgurl+')'}]">
							</view>
							<view class=" comment-head-title">
								<view class="user-name">{{reply.nickname || ''}}</view>
								<view class="text-gray text-sm flex justify-between comment-data">
									{{reply.created_at}}
								</view>
							</view>
						</view>

						<view class="secend-comtent">
							<view class="textOver">
								<TextOver :content="reply.reply_content" :num="80" maxHight="200px" :isFixed="false"
									style="height: 100%;" :type="1"></TextOver>
							</view>



						</view>

					</view>
					<view class="noComent" v-if="foruminfo.replyList.length==0">
						<text class="cuIcon-community"></text>

						暂时还没有评论，开始写第一个评论~
					</view>

				</view>




			</view>

			<view class="inputbox" :style="{bottom:inputTop+'px'}">
				<input @confirm="apply" :adjust-position="false" v-model="replaycontent" placeholder="点此写评论..."
					class="input-box">
				<button class="cu-btn sm bg-blue " style="height: 80%;width: 18%;font-size: 30upx;margin-left: 1%;"
					@click="apply()">发送</button>

			</view>


		</view>





	</view>
</template>
<script>
	import MescrollUni from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-uni.vue"
	import uniPopup from "@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue";
	import TextOver from '@/components/text-over.vue'
	export default {
		name: "Circle",
		components: {
			MescrollUni,
			TextOver
		},
		data() {
			return {
				title: "消息通知",
				id: '',
				resDomain: this.resDomain,
				domain: this.apiHost,
				StatusBar: this.Custom,
				WH: this.WH,
				headIndex: 0,
				isShowComment: false, //是否显示二级评论
				switchA: false, //是否查看校区
				current: 0,
				mescroll: null,
				recommList: [],
				onlyArea: false,
				area_id: 0,
				is_follow: 0,
				userInfo: {},
				index: 0,
				forum_id: 0,
				replylist: [],
				foruminfo: [], //二级评论
				replaycontent: "",
				forum_id_s: "",
				swiperHeight: '',
				isload: false,
				islogin: false,
				item: {},
				deviceH: this.WH,
				inputTop: 0,
				animationData: {},
				animation: null

			}
		},
		onLoad(option) {
			this.id = option.id;
			this.loadData();
		},

		mounted() {
			uni.onKeyboardHeightChange(res => {
				this.inputTop = res.height;
			})
			this.animation = uni.createAnimation({
				duration: 1000,
				timingFunction: 'ease'
			})
			this.load();
		},
		methods: {
			load() {
				this.isload = true;
				this.getInfo().then((e) => {
					
					this.swiperHeight = e.screenHeight - (e.custom.top + e.custom.height);
					
				})
				// this.swiperHeight = this.WH - (this.StatusBar.top + this.StatusBar.height);
			},
			loadData() {

				this.apiRequest('/buyer/forumInfo', {
					forum_id: this.id,

				}, 0, 'GET').then(res => {
					if (res.code == 200) {
						this.item = res.data;
					}
				})
			},

			errorPics(key) {

				this.$nextTick(() => {
					this.item.pics[key] = false;

				})

			},
			count(num) {
				if (num === 0) {
					num = '';
				} else if (num > 9999 && num <= 9999999) {
					num = parseInt(num / 10000);
					num = parseInt(num) + "万";
				} else if (num > 9999999) {
					num = parseInt(num / 10000000);
					num = parseInt(num) + "千万";
				}
				return num;
			},
			changeTab(is_follow) {

				this.is_follow = is_follow;

			},
			follow(follow_user_id) {
				this.apiRequest('/buyer/followUser', {
					follow_user_id: follow_user_id
				}, 0).then(res => {
				
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					if (res.code == 200) {
						if (this.item.follow == 1) {
							this.item.follow = 0
						} else {
							this.item.follow = 1
						}
					}
				})
			},


			praise(forum_id) {

				this.apiRequest('/buyer/userPraise', {
					forum_id: forum_id
				}, 0, 'GET').then(res => {
					console.log(res)
					if (res.code == 200) {
						if (res.data == 'INC') {
							this.item.praise = 1
							this.item.praise_num++
						} else {
							this.item.praise = 0
							this.item.praise_num--
						}
					}
				})
			},
			changeTime() {
				let date = new Date(),
					seperator1 = "-",
					year = date.getFullYear(),
					month = date.getMonth() + 1,
					strDate = date.getDate(),
					h = (date.getHours() > 9) ? date.getHours() : "0" + date.getHours(),
					m = (date.getMinutes() > 9) ? date.getMinutes() : "0" + date.getMinutes(),
					s = (date.getSeconds() > 9) ? date.getSeconds() : "0" + date.getSeconds();

				if (month >= 1 && month <= 9) {
					month = "0" + month;
				}
				if (strDate >= 0 && strDate <= 9) {
					strDate = "0" + strDate;
				}

				let currentdate = year + seperator1 + month + seperator1 + strDate + "  " + h + ":" + m + ":" + s;
				return currentdate;
			},
			apply(e) {
				let user = uni.getStorageSync('userInfo');
				let fabu = () => {
					this.foruminfo.replyList.unshift({
						nickname: user.nickname,
						reply_content: this.replaycontent,
						created_at: this.changeTime(),
						headimgurl: user.headimgurl

					})
				}
				this.foruminfo.reply_num++
				uni.hideKeyboard()
				this.apiRequest('/buyer/userReply', {
					forum_id: this.forum_id_s,
					content: this.replaycontent
				}, 0).then(res => {
					if (res.code == 200) {
						fabu();
					}
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				})
			},

			previewImg(src, urls) {

				uni.previewImage({
					current: src,
					urls
				})
			},
			closeComent() { //关闭二级评论
				(this.isShowComment) ? (() => {
					this.isShowComment = false;
					this.closeShowAimation();
					this.loadData();
				})() : (() => {
					this.foruminfo = [];
					this.showAimation();
					this.forum_id_s = this.item.forum_id;

					this.apiRequest('/buyer/forumInfo', {
						forum_id: this.item.forum_id,
					}, 1).then(res => {
						if (res.code == 200) {
							this.foruminfo = res.data
						}

					})


				})()

			},
			/**
			 * 关闭动画
			 */
			closeShowAimation() {
				this.animation.bottom(-this.deviceH).step({
					duration: 200
				});
				this.animationData = this.animation.export();
			},
			/**
			 * 显示动画
			 */
			showAimation() {
				this.animation.bottom(0).step({
					duration: 500
				});
				this.animationData = this.animation.export();
				setTimeout(() => {
					this.isShowComment = true;
				}, 500)

			}



		}
	}
</script>
<style scoped>
	.content{
		height: 100vh;
		overflow: hidden;
	}
	switch {
		transform: scale(0.7, 0.7);
	}

	.headerBox {
		width: 96vw;
		margin-left: 2vw;
		display: flex;
		flex-direction: row;
		justify-content: start;
		position: relative;
	}

	.inputbox {
		width: 98vw;
		margin-left: 1vw;
		height: 100upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		position: absolute;
		padding-bottom: calc(env(safe-area-inset-bottom) / 2);
		background: #FFFFFF;
	}

	.noComent {
		width: 100%;
		min-height: 150upx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 500;
		color: #999999;
		flex-wrap: wrap;
	}

	.noComent text {
		width: 100%;
		text-align: center;
		font-size: 60upx;

	}

	.input-box {
		width: 80%;
		height: 80%;
		padding-left: 10upx;
		border: 1px solid #E4EDFE;
	}

	.head-title {
		margin-left: 4vw;

	}

	.head-title-select {
		font-size: 40upx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
	}

	.head-title-no {
		font-size: 32upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.head-select {

		position: absolute;
		float: right;
		height: 80%;
		display: flex;
		align-items: center;
	}

	.commentBox {
		width: 94vw;
		margin: auto;

	}

	.comment-item-box {
		width: 100%;
		background: #FFFFFF;
		box-shadow: 0px 0px 10upx 0px rgba(0, 0, 0, 0.05);
		border-radius: 20upx;
		flex-direction: column;

	}

	.margintop1 {
		margin-top: 20upx;
	}

	.imgbox {
		margin-top: 20upx;
		display: flex;
		flex-wrap: wrap;

	}

	.vcenter {
		display: flex;
		align-items: center;
	}

	.comment-head {
		height: 90upx;
		width: 92%;
		margin: 4% auto;
		position: relative;

	}

	.coment-content {
		margin-top: 4% auto;
		width: 92%;
		font-size: 24pux;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: normal;
		padding-bottom: 15upx;

	}

	.comment-foot {
		width: 92%;
		height: 100upx;
		display: flex;
		position: relative;
		flex-direction: row;
		align-items: center;
	}

	.comment-head-title {
		height: 100%;
		margin-left: 10upx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		text-align: left;
	}

	.comment-head-title view {
		display: flex;
		align-items: center;
	}

	.user-name {
		width: 100%;
		font-size: 32upx;
		font-weight: 800;
		color: #333333;
		height: 50%;
	}

	.comment-data {
		width: 100%;
		height: 50%;
		display: flex;
		align-items: flex-end;
	}

	.comment-foot-tag {
		font-size: 24upx;
		background: #DBEBFF;
		font-weight: 500;
		color: #1270E0;
		max-width: 60%;
		overflow: auto;
		text-overflow: ellipsis;
		white-space: nowrap;
		padding-left: 20upx;
		padding-right: 20upx;
		display: block;
		line-height: 48rpx;

	}

	.comment-foot-right {
		position: absolute;
		float: right;
		right: 0;
		display: flex;
		flex-direction: row;
		height: 100%;

	}

	.comment-foot-icon {
		height: 100%;
		display: flex;
		font-size: 45upx;
		color: #DBDBDB;
		align-items: center;
	}

	.comment-foot-num {
		height: 100%;
		font-size: 28upx;
		margin: 10upx 5upx 0 5upx;
		font-weight: 500;
		color: #333333;
		white-space: nowrap;
		display: flex;
		align-items: center;
		padding-left: 8upx;

	}

	/* 	二级评论样式 */
	.comment-secen-box {
		width: 100vw;
		position: fixed;
		z-index: 9999;
	}

	.mask {
		width: 100%;
		height: 100%;
		background-color: #000000;
		opacity: 0.5;
		position: absolute;
		top: 0;

	}

	.comment-secend {
		width: 100%;

		position: absolute;
		bottom: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #FFFFFF;
		border-radius: 20upx 20upx 0px 0px;
	}

	.comment-secend-title {

		width: 90%;
		height: 100upx;
		display: flex;
		flex-direction: row;
		font-size: 36upx;
		font-weight: 800;
		color: #333333;
		line-height: 100upx;
		position: relative;
		align-items: center;
	}

	.comment-secend-boxes {
		width: 90%;
		/* 	height: 90vh; */
		display: flex;
		flex-direction: column;
	}

	.comment-item-box1 {
		width: 100%;
		max-height: 500upx;
		margin-top: 20upx;
		background: #FFFFFF;
		flex-direction: column;
		justify-content: center;
		border-top: 4upx solid #F2F2F2;
		position: relative;

	}

	.comment-secend-fn {
		width: 20%;
		position: absolute;
		float: right;
		right: 0;
		display: flex;
		flex-direction: row-reverse;
		height: 100%;
	}

	.guanzhu {
		position: absolute;
		float: right;
		right: 0;
		height: 50upx;
		font-size: 24upx;
	}

	.shenhe {
		position: absolute;
		float: right;
		right: 0;
		height: 50upx;
		font-size: 24upx;
		font-weight: 500;
		background-color: transparent;
	}

	.yiguanzhu {
		position: absolute;
		float: right;
		right: 0;
		height: 50upx;
		font-size: 24upx;
		font-weight: 500;
		color: #999999;
		background-color: transparent;
	}

	.forum-pic {
		width: 96%;
		margin-left: 2%;
		display: flex;
		flex-wrap: wrap;
	}

	.forum-pic image {
		width: 90%;
		max-height: 300rpx;
	}

	.forum-pic .show-many {
		width: 150rpx;
		height: 150rpx;
		margin: 10rpx 10rpx 0 0;
		border: 1px solid;
		border-radius: 20upx;
	}

	forum-pic {
		width: 100%;
	}

	.forum-pic image {
		width: 100%;
		margin-top: 20rpx;
	}

	.forum-social {
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
		line-height: 30rpx;
	}

	.comment-foot-view {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		height: 100upx;
		min-width: 120upx;
		flex-direction: row-reverse;

	}
</style>


<style lang="scss">
	$width:(750*0.94*0.92-30)/3;
	$imgW:(750*0.94*0.08)/2;


	.imgbox {
		padding-left: $imgW+upx;
		width: 100%;

	}


	.picBox {
		width: $width+upx;
		height: $width+upx;
		border-radius: 20upx;
		object-fit: cover;
		margin: 0upx 10upx 10upx 0upx;
	}

	.picBoxNo {
		max-width: 750*0.94-20+upx;
		max-height: 400upx;
		border-radius: 20upx;
		object-fit: cover;
		margin: 10upx 0upx 10upx 0upx;
	}


	.secend-comtent {

		width: 92%;
		margin: auto;
		font-size: 24pux;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		padding-bottom: 15upx;

	}

	.comment-head-title {
		width: 750*0.9*0.92-106+upx;
	}

	.textOver {
		width: 750*0.9*0.92-106+upx;

		margin-left: 106upx;
	}
</style>
